$(function () {
  let form = layui.form;
  let layer = layui.layer;
  let laypage = layui.laypage;
  let query = {
    pagenum: 1, //页码
    pagesize: 3, //每页显示的条数
  };
  //从服务器获取列表信息
  list();
  function list() {
    $.ajax({
      url: "admin/users",
      data: query,
      success: function (res) {
        //console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message);
        } else {
          //使用模板引擎
          let htmlStr = template("userListTpl", res);
          $("#tb").html(htmlStr);
          //传递total参数 分页
          paging(res.total);
        }
      },
    });
  }
  //分页
  function paging(total) {
    //执行一个laypage实例
    laypage.render({
      elem: "page", //注意，这里的 page 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      curr: query.pagenum, // 起始页
      layout: ["prev", "page", "next", "skip", "count", "limit"], //排版
      limits: [3, 10, 30, 40, 100], //每页条数选择项
      limit: query.pagesize, //每页显示条数
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        //console.log(obj.limit); //得到每页显示的条数

        // 把query对象的pagenum参数修改了（页码）
        query.pagenum = obj.curr;
        // 把query的pagesize调整下
        query.pagesize = obj.limit;

        //首次不执行
        if (!first) {
          list();
        }
      }, //切换分页的回调
    });
  }
  //删除 事件委托
  $("body").on("click", ".delBtn", function () {
    let id = $(this).attr("data-id");
    layer.confirm(
      "确认删除用户吗?",
      { icon: 3, title: "信息" },
      function (index) {
        $.ajax({
          url: "admin/users/" + id,
          type: "DELETE",
          success: function (res) {
            if (res.status !== 0) {
              return layer.msg(res.message);
            } else {
              layer.msg(res.message);
              //重新获取列表
              list();
            }
          },
        });
        layer.close(index);
      }
    );
  });
  //重置密码
  //自定义密码的校验
  form.verify({
    // 密码的校验
    pass: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
    // 两次输入的新密码必须相同
    newPass: (value) => {
      // 获取到新密码的内容，和确认密码的value做比较
      let newPwd = $("[name=password]").val();

      if (newPwd !== value) {
        return "两次输入的新密码不相同！";
      }
    },
  });
  let index;
  $("body").on("click", ".reset", function () {
    let id = $(this).attr("data-id");
    //console.log(id);
    index = layer.open({
      type: 1,
      title: "重置密码",
      area: "500px",
      content: $("#resetTpl").html(),
    });
    $(".resetForm").submit(function (e) {
      e.preventDefault();
      let data = $(this).serialize();
      $.ajax({
        url: "admin/users/" + id,
        type: "PUT",
        data,
        success: function (res) {
          //console.log(res);
          if (res.status !== 0) {
            return layer.msg(res.message);
          } else {
            //关闭弹框
            layer.close(index);

            layer.msg(res.message);
            list();
          }
        },
      });
    });
  });

  //   //编辑
  $("body").on("click", ".editBtn", function () {
    let id = $(this).attr("data-id");
    location.href = "./edit.html?id=" + id;
  });
});
